{
  "name" : "Lanzamiento de cohete: interactivo",
  "title" : "Lanzamiento de cohete: interactivo",
  "description" : "",
  "card1title" : "Introducción",
  "card1Description" : "En este tutorial aprenderemos a agregar interactividad a HTML5 Canvas Animation.\n\nComenzaremos a crear un documento que contiene la animación de un cohete que viaja alrededor del mundo.\n\nLo modificaremos para que el cohete se lance solo cuando el usuario haga clic en el botón de lanzamiento.",
  "card1StepInfo" : "1 de 17",
  "card1PosAction" : "Siguiente",
  "card1NegAction" : "Anterior",
  "card2title" : "Animación de prueba",
  "card2Description" : "Primero veamos la animación que tenemos. \n\n1. Haga clic en el botón Reproducir y obtenga una vista previa de la animación en el navegador.\n\nVerá que el cohete comienza a moverse cuando la página está cargada. Modificaremos esto para que se inicie solo después de que el usuario haga clic en el botón Iniciar",
  "card2StepInfo" : "2 de 17",
  "card2PosAction" : "Siguiente",
  "card2NegAction" : "Anterior",
  "card2Node" : "PanelID_508$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/appHeaderCommandsPanel,0/1/UI_AppHeader_Play",
  "card3title" : "Crear una capa Botones",
  "card3Description" : "1. Cambiar a la vista Cronología\n2. Cree una nueva capa haciendo clic en el botón más.\n3. Haga doble clic en el nombre de la capa y cámbielo a 'Botones'",
  "card3StepInfo" : "3 de 17",
  "card3PosAction" : "Siguiente",
  "card3NegAction" : "Anterior",
  "card3Node" : "PanelID_266$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/TimelinePanelRoot,0/1/TrackControl,0/1/LayerHeader,0/1/LayerHeaderLeftControls,0/1/TimelineNewLayer",
  "card4title" : "Seleccionar un color para el fondo del botón",
  "card4Description" : "1. Haga clic en el botón 'Color de relleno' en la parte inferior de la barra de herramientas \n2. Seleccione el color azul. Este será el color de nuestro botón\n",
  "card4StepInfo" : "4 de 17",
  "card4PosAction" : "Siguiente",
  "card4NegAction" : "Anterior",
  "card4Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolOptionsContainer,0/1/UI_ControlView,1/1/UI_InteractiveControlView",
  "card5title" : "Dibujar el rectángulo del botón",
  "card5Description" : "1. Haga clic en el primer fotograma de la capa Botones. \n2. Haga clic en la herramienta Rectángulo. \n3. Dibuje un rectángulo en el centro inferior del escenario.",
  "card5StepInfo" : "5 de 17",
  "card5PosAction" : "Siguiente",
  "card5NegAction" : "Anterior",
  "card5Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolsContainer,0/1/33325",
  "card6title" : "Seleccionar color de texto",
  "card6Description" : "1. Haga clic en el botón Color de relleno\n2. Seleccione el color blanco",
  "card6StepInfo" : "6 de 17",
  "card6PosAction" : "Siguiente",
  "card6NegAction" : "Anterior",
  "card6Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolOptionsContainer,0/1/UI_ControlView,1/1/UI_InteractiveControlView",
  "card7title" : "Establecer pie de ilustración de botón",
  "card7Description" : "1. Haga clic en la herramienta Texto y, a continuación, haga clic en el interior del rectángulo azul del escenario. \n2. Escriba 'Launch'",
  "card7StepInfo" : "7 de 17",
  "card7PosAction" : "Siguiente",
  "card7NegAction" : "Anterior",
  "card7Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolsContainer,0/1/33513",
  "card8title" : "Salir del modo de edición de texto",
  "card8Description" : "1. Salga del modo de edición de texto haciendo clic en la herramienta Selección de la barra de herramientas",
  "card8StepInfo" : "8 de 17",
  "card8PosAction" : "Siguiente",
  "card8NegAction" : "Anterior",
  "card8Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolsContainer,0/1/33508",
  "card9title" : "Establecer propiedades de texto",
  "card9Description" : "1. Haga clic en la pestaña 'Propiedades'. \n2. Haga clic en la pestaña 'Objeto'. \n3. Cambie el tamaño del texto para que entre en el rectángulo. \n4. Centre la posición del texto en el rectángulo.",
  "card9StepInfo" : "9 de 17",
  "card9PosAction" : "Siguiente",
  "card9NegAction" : "Anterior",
  "card9Node" : "PanelID_268$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_TabViewContainer,1/1/UI_TabView,1/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/an::PlacardView,0/1/piTextHdr,1/1/UI_SubView,0/1/UI_PITEXTHDR",
  "card10title" : "Crear símbolo del botón",
  "card10Description" : "1. Haga clic con el botón secundario en la capa Botones. \n2. Seleccione la opción 'Convertir capas a símbolo'.\n3. Establezca el nombre en 'Botón de inicio', escriba 'Botón' y haga clic en Aceptar.",
  "card10StepInfo" : "10 de 17",
  "card10PosAction" : "Siguiente",
  "card10NegAction" : "Anterior",
  "card10Node" : "PanelID_266$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/TimelinePanelRoot,0/1/TrackControl,0/1/LayerHeader",
  "card11title" : "Establecer nombres de instancias de símbolo",
  "card11Description" : "Vamos a escribir guiones para la interactividad. Para eso necesitamos nombrar las instancias del botón y los símbolos del cohete. \n\n1. Haga clic en el símbolo (botón) del escenario. \n2. En la pestaña 'Objeto' del panel Propiedades, establezca el nombre de la instancia en Launch_btn y presione la pestaña de botón. \n3. Repita lo mismo con el cohete. Haga clic en el cohete en el escenario y, en la pestaña Objeto, establezca el nombre de la instancia en cohete",
  "card11StepInfo" : "11 de 17",
  "card11PosAction" : "Siguiente",
  "card11NegAction" : "Anterior",
  "card11Node" : "PanelID_268$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_TabViewContainer,1/1/UI_TabView,1/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/an::PlacardView,0/1/piSymbolHdr,1/1/UI_SubView,0/1/UI_PISYMBOLHDR",
  "card12title" : "Detener la animación de cohetes en el primer fotograma",
  "card12Description" : "Queremos animar el cohete solo haciendo clic en el botón 'Iniciar'. Así que necesitamos detener la animación del cohete en el primer fotograma. Vamos a escribir código JavaScript para hacerlo.\n\n1. Haga clic con el botón derecho en el primer fotograma de la capa 'Contenedor de cohetes'.\n2. Seleccione 'Acciones'. Esto abre el Editor de acciones.\n3. Escriba 'this.rocket.stop();' en el editor de código.\n4. Cierre el panel de Acciones.\n\nTenga en cuenta que 'cohete' es el nombre de instancia del símbolo 'Contenedor de cohetes'.",
  "card12StepInfo" : "12 de 17",
  "card12PosAction" : "Siguiente",
  "card12NegAction" : "Anterior",
  "card12Node" : "PanelID_266$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/TimelinePanelRoot,0/1/TrackControl,0/1/LayerHeader,0/1/LayerHeaderLeftControls",
  "card13title" : "Detener la animación de cohetes en el último fotograma",
  "card13Description" : "También queremos evitar que los cohetes se muevan cuando lleguen al final del recorrido, que es el último fotograma con el símbolo de cohete. Para esto necesitamos editar el símbolo de cohete. \n1. Haga doble clic en el símbolo de cohete\n2. Haga clic con el botón secundario en el último fotograma\n3. Seleccione 'Acciones'\n4. Escriba 'this.stop();' en el editor de código.\n5. Cierre el panel de Acciones",
  "card13StepInfo" : "13 de 17",
  "card13PosAction" : "Siguiente",
  "card13NegAction" : "Anterior",
  "card14title" : "Cambiar a la escena principal",
  "card14Description" : "Vuelva a la escena principal haciendo clic en 'Escena 1' en la parte superior izquierda.",
  "card14StepInfo" : "14 de 17",
  "card14PosAction" : "Siguiente",
  "card14NegAction" : "Anterior",
  "card15title" : "Agregar controlador de eventos del botón",
  "card15Description" : "Cuando el usuario hace clic en el botón Iniciar, queremos iniciar la animación del cohete. Tenemos que escribir el controlador de eventos de 'click' para el botón.\n1. Haga clic con el botón derecho en el primer fotograma de la capa 'Botón de inicio' \n2. Seleccione Acciones. \n3. Escriba el siguiente script: -\n\nvar _this = this;\nthis.launch_btn.on('click', function(evt) {\n   _this.rocket.gotoAndPlay(0);\n});\n\n4. Cierre el panel de Acciones",
  "card15StepInfo" : "15 de 17",
  "card15PosAction" : "Siguiente",
  "card15NegAction" : "Anterior",
  "card15Node" : "%DocName$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,4/1/UI_SubView,0/1/UI_ControlsContainer,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/parentSubview,0/1/StatusSymbolPopup",
  "card16title" : "Animación de prueba",
  "card16Description" : "1. Haga clic en el botón Reproducir para ejecutar la animación en el explorador.\n\n2. Haga clic en el botón Lanzamiento y verá cómo comienza la animación del cohete.",
  "card16StepInfo" : "16 de 17",
  "card16PosAction" : "Siguiente",
  "card16NegAction" : "Anterior",
  "card16Node" : "PanelID_508$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/appHeaderCommandsPanel,0/1/UI_AppHeader_Play",
  "card17title" : "¡Enhorabuena!",
  "card17Description" : "¡Enhorabuena! Ha finalizado este tutorial.",
  "card17StepInfo" : "17 de 17",
  "card17PosAction" : "Fin",
  "card17NegAction" : "Anterior"
}